import React, {useEffect} from 'react';
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import {parseUnixTime} from "../../../../../helpers/utils";
import {AirplaneIcon, CarIcon, CloseIcon, ConcertIcon, Edit, HotelIcon} from "../icons";
import {Popover, PopoverHeader, PopoverBody,} from "reactstrap"
import About from "./About";

const Schedules = props => {
  const {schedule, tooltipId, setTooltipId, scrollBlockRef, eventId} = props
  const optionsDate = {month: 'numeric', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric'}



  useEffect(() => {
    if (scrollBlockRef.current)
    scrollBlockRef.current.addEventListener('scroll', ()=>setTooltipId(null))
    return () => {
      if (scrollBlockRef.current)
      scrollBlockRef.current.removeEventListener('scroll', ()=>setTooltipId(null))
    }
  }, [])

  const toggle = () => setTooltipId(null)

  const iconType = schedulable_type => {
    switch (schedulable_type) {
      case 'Todo':
        return <ConcertIcon size={18}/>;
      case 'Flight':
        return <AirplaneIcon size={18}/>;
      case 'Hotel':
        return <HotelIcon size={18}/>;
      case 'Travel':
        return <CarIcon size={18}/>;
      default:
        return
    }
  };

  return (
    <React.Fragment>
      <div>
        <Popover
          popperClassName={`schedule-popover-${schedule.id} schedule-popover`}
          placement="left"
          boundariesElement='window'
          target={`tooltip${schedule.id}`}
          isOpen={tooltipId === schedule.id}
        >
          <PopoverHeader>
            <div className="schedule-popover-header">
              <div className="schedule-popover-name">{schedule.name}</div>
              <span className="schedule-popover-close">
                <CloseIcon
                  height="16"
                  width="16"
                  onClick={toggle}
                />
              </span>
            </div>
          </PopoverHeader>
          <PopoverBody>
            <About
              eventId={eventId}
              schedule={schedule}
              tooltipId={tooltipId}
              setTooltipId={setTooltipId}
            />
          </PopoverBody>
        </Popover>

        {
          tooltipId === schedule.id && <div className={`schedule-popover-620-${schedule.id} schedule-popover-620`} >
            <div className="schedule-popover-620__header">
              <div className="schedule-popover-header">
                <div className="schedule-popover-name">{schedule.name}</div>
                <span className="schedule-popover-close">
                <CloseIcon
                  height="16"
                  width="16"
                  onClick={toggle}
                />
              </span>
              </div>
            </div>
            <div className="schedule-popover-620__body">
              <About
                eventId={eventId}
                schedule={schedule}
                tooltipId={tooltipId}
                setTooltipId={setTooltipId}
              />
            </div>
          </div>
        }

        <li>
          <div className="timeline-icon cursor-pointer"
               onClick={() => props.setTooltipId(schedule.id)} id={`tooltip${schedule.id}`}>
            {iconType(schedule.schedulable_type)}
          </div>
          <div className="timeline-info">
            <p
              className="font-weight-bold timeline-name cursor-pointer"
              onClick={() => props.setTooltipId(schedule.id)}
            >{schedule.name}</p>
            {
              schedule.begin && <div className="d-flex flex-wrap">
                <span className="pr-1">Начало </span>
                <span className="span-colored">{parseUnixTime(schedule.begin).toLocaleString('ru', optionsDate)}</span>
              </div>
            }
            {
              schedule.end && <div className="d-flex flex-wrap">
                <span className="pr-2">Конец </span>
                <span className="span-colored">{parseUnixTime(schedule.end).toLocaleString('ru', optionsDate)}</span>
              </div>
            }
          </div>
        </li>
      </div>
    </React.Fragment>
  );

}

const mapStateToProps = state => ({});
const mapDispatchToProps = dispatch => bindActionCreators({}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(Schedules);
